<template>
  <div class="listOder" >
    <section id="header">
     <HeaderPublc></HeaderPublc>
    </section>
    <section id="cent">
      <div class="top">
      </div>
      <div class="center">
        <el-dialog  :visible.sync="dialogVisible" width="470px">
          <el-form ref="fromData" :model="fromData" label-width="80px" label-position="right">
            <el-form-item :label="languageData.public.Place ">
              <el-input  v-model="fromData.station"  :placeholder="languageData.public.Place"></el-input>
            </el-form-item>
            <el-form-item :label="languageData.public.doingStatus">
              <!--<div class="medium" >-->
                <!--<el-button    > 装箱</el-button>-->
                <!--<el-button   > 装箱完成</el-button>-->
                <!--<el-button    > 中转</el-button>-->
                <!--<el-button  > 清关</el-button>-->
              <!--</div>-->
              <div>
                <el-select v-model="fromData.operStatus" :placeholder="languageData.public.doingStatus"  style="width: 100%">
                  <el-option
                    v-for="item in operStatus"
                    :key="item.value"
                    :label="languageData.id=='Chinese'?item.label:item.label2"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
              <div class="" style="margin-top: 40px;text-align: right">
                <el-button type="primary" size="medium" round  style="width: 120px" @click="addOperFn()">{{languageData.public.done}}</el-button>
                <el-button size="medium" round @click="dialogVisible = false" style="width: 120px">{{languageData.public.cancel}}</el-button>
              </div>
          </el-form>
        </el-dialog>
        <!--- --->
        <div class="saech" >
          <div class="saechBox" style="text-align: right;margin-top: 40px;position: relative">
            <!---全选 --->
            <el-checkbox v-show="!uodataShow" class="checkbox"  style="position:absolute;left: -80px;top: 10px" v-model="check" @change="all()">{{languageData.public.All}}</el-checkbox>
            <!---批量更新 --->
            <el-button  v-show="!uodataShow" icon="el-icon-plus" v-on:click="updatStatusFn(list)">{{languageData.public.BatchUpdate}}</el-button>
            <!---取消 --->
            <el-button     v-on:click="" v-show="!uodataShow" @click="cance()">{{languageData.public.cancel}}</el-button>
            <!---批量更新 --->
            <el-button    icon="el-icon-plus" v-on:click="" v-show="uodataShow" @click="uodataShow = !uodataShow">{{languageData.public.BatchUpdate}}</el-button>
            <!---搜索框 --->
            <input class="saechIput"  v-model="input" :placeholder="languageData.public.sechText"></input>
            <!---索索按钮 --->
            <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="saechFn()"> </el-button>
          </div>
        </div>
        <div class="cardBox clearfix" :transport="transport"  v-loading="loading" element-loading-text="loading..." element-loading-spinner="el-icon-loading" element-loading-background="#f7f7f7">
          <div class="card clearfix"  v-for=" list in listData" >
            <div class="span4 device left clearfix" v-on:click="goChart(list)">
              <div class = "left iocnBox" >
                <!--运输状态-->
                <p class="go">{{languageData.id=='Chinese'?list.transportStatustextC:list.transportStatustextE}} </p>
                <!--运输图标-->
                <div class="iocn">
                  <img :src="list.icon">
                </div>
              </div>
              <div class = "left textBox" style="position: relative">
                <!--起点-->
                <div class=" ctiy ">{{languageData.id=='Chinese'?list.startPosition:list.startPositionEn}}</div>
                <!--终点-->
                <div class=" ctiy">{{languageData.id=='Chinese'?list.endPosition:list.endPositionEn}}</div>
                <!--当前地址-->
                <div class="text" >
                <p class="goMap" style="cursor: pointer" @click.stop="gomap(list)"><i class="el-icon-location"></i> {{languageData.admin.current}}：{{list.now}}<i class="el-icon-arrow-right"></i></p>
                <p style="text-indent:20px" v-show="list.estimatedArrivalTime">{{ languageData.public.arriveTime}}: {{list.estimatedArrivalTime}}</p>
                </div>
                <div class="iconMage">
                  <div class="bul"></div>
                  <div class="solid"></div>
                  <div class="red"></div>
                </div>
              </div>
              <div class = "cleae"> </div>
              <!--<div class=" textBox address clearfix">-->
                  <!--<div class="left iconBox">-->
                    <!--&lt;!&ndash;运输箭头&ndash;&gt;-->
                    <!--<div class="l"></div>-->
                  <!--</div>-->
                <!--<div class="cleae"></div>-->
                <!--<div class="text" >-->
                  <!--<p class="goMap" style="cursor: pointer" @click.stop="gomap(list)"><i class="el-icon-location"></i> {{languageData.header.transport}}：{{list.now}}<i class="el-icon-arrow-right"></i></p>-->
                <!--</div>-->
              <!--</div>-->
            </div>
            <div class="span3 device left  clearfix">
              <div class="textBox deviceT" style="position: relative">
                <!--柜号-->
                <p ><label>{{list.transportType==1 ? languageData.public.plalteB:languageData.public.plalte}}：</label><span>{{list.containerId?list.containerId:"- - - - - - - - - - - -"}}</span><span class="copy" :data-clipboard-text="list.containerId" @click="copyFn($event)"> {{languageData.public.copy}} </span></p>
                <!--提单号-->
                <p v-on:click="goChart(list)"><label>{{languageData.public.ladingIdBill}}：</label><span>{{list.ladingId?list.ladingId:"- - - - - - - - - - - "}}</span></p>
                <!--设备号-->
                <p v-on:click="goChart(list)"><label>{{languageData.public.container}}：</label><span>{{list.deviceId}}</span></p>
                <!--复制按钮-->
              </div>
            </div>
            <div class="span3 device left clearfix"  :mapListData="mapListData">
              <div v-show="list.Responseid" class="deviceStatus textBox deviceT">
                <!--运输方式-->
                <!--<p><label>{{languageData.public.modeOfTransport}}： </label><span> {{languageData.id=='Chinese'?list.transportTypeText:list.transportTypeTextEn}} </span></p>-->
                <!--&lt;!&ndash;运输状态&ndash;&gt;-->
                <!--<p><label>{{languageData.public.status}}： </label><span> {{languageData.id=='Chinese'?list.transportStatustextC:list.transportStatustextE}} </span></p>-->
                <!--&lt;!&ndash;设备状态&ndash;&gt;-->
                <!--<p><label>{{languageData.public.deviceStatus}}： </label><span> {{languageData.id=='Chinese'?list.deviceOnfftext.CN:list.deviceOnfftext.EN}}  </span></p>-->
                <!--操作地点    -->
                <p ><label>{{languageData.public.Place }}：</label><span>{{list.station}}</span><span class="copy" style="border: 1px solid #5b9fcf;color:#5b9fcf " v-show="uodataShow"  @click="updatStatusFn(list)"> {{languageData.public.update}} </span></p>
                <!--操作状态-->
                <p v-on:click="goChart(list)"><label>{{languageData.public.doingStatus}}： </label><span> {{languageData.id=='Chinese'?list.operStatusCN:list.operStatusEN}}  </span></p>
                <!--创建时间-->
                <p v-on:click="goChart(list)"><label>{{languageData.public.doingTime }}： </label><span> {{list.operTime}} </span></p>
              </div>
              <div v-show="!list.Responseid && uodataShow" class="deviceStatus textBox deviceT">
                <div class="">
                  <!--- 更新操作---->
                  <el-button round class="okBot con" @click.stop="updatStatusFn(list)">{{languageData.public.updateOperation}}</el-button>
                </div>
              </div>
            </div>
            <div class="cleae" :updateStatusData="updateStatusData" ></div>
            <div class="timeDate">
              <p class="year"> {{list.year?list.year:''}}</p>
              <p class="data" v-show="list.dateText">{{list.dateText}}</p>
              <p class="data" v-show="!list.dateText"><span > {{list.data}}</span>  <i class="month"> {{languageData.id=='Chinese'?list.month:list.monthEN}} {{languageData.id=='Chinese'? languageData.public.month:''}}</i></p>
            </div>
            <!--<div class="set">-->
              <!--<div >-->
                <!--<el-button round class="bot con" @click.stop="del(list.id)">{{languageData.public.Delete}}</el-button>-->
              <!--</div>-->
              <!--&lt;!&ndash;<div >&ndash;&gt;-->
                <!--&lt;!&ndash;<el-button round class="okBot" @click.stop="updatStatusFn(list)">{{languageData.public.completion}}</el-button>&ndash;&gt;-->
              <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--</div>-->
            <el-checkbox v-show="!uodataShow" class="checkbox"  v-model="list.check" ></el-checkbox>
          </div>
          <div class=" " style="margin-top: 30px"><p style="font-size: 18px;color: #0d71b7">{{errorDate}}</p> </div>
        </div>
        <div style="text-align: right;width: 70%;min-width: 910px;max-width:1100px; padding-bottom: 40px;margin: auto" v-show="!errorDate">
          <el-pagination layout="prev, pager, next" :page-count="pages.cunt" v-show="pages.cunt>1" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <div class="botList">
      </div>
    </section>
    <section id="footer" style="text-align: right">
    </section>
  </div>
</template>
<style scoped>
  #cent{background-color: #f7f7f7}
  .saech{ width: 70%;min-width: 910px;max-width: 1100px;text-align: left;margin: auto }
  .checkbox{width:20px;height:20px;position: absolute;top: 65px;left: -40px}
  .saechIput{width: 460px;margin-right: 0px;position: relative;z-index: 10;border: 1px solid #fff;height: 26px;line-height:26px;padding: 6px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 67px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .cardBox{width:80%;min-width: 920px;max-width:1100px;padding: 40px;min-height: 400px;margin:0px auto;}
  .card{min-height: 140px;width: 100%;margin-top:20px;background-color: #fff;position: relative;cursor: pointer}
  .card:hover{box-shadow:0 0 16px #e2e7ea }
  .goMap:hover{box-shadow:0 0 16px #e2e7ea }
  .device { }
  .device p{ text-align: left;line-height: 34px;}
  .deviceStatus p{font-size: 12px;line-height: 28px;}
  .textBox{padding: 15px;margin: auto}
  .deviceT{width: 282px; }
  .address{ padding-left:30px;max-width:431px;min-width: 280px;margin-left: 0px;position: relative}
  .iocnBox .go{font-size: 12px;text-align: center ;width: 100%;line-height: 25px;color: #000}
  .ctiy{font-size:22px;font-weight: bold; text-align: left;line-height: 40px;padding-left:20px;}
  .iconBox{width:100px;line-height: 40px;border-bottom: 2px solid #e1e1e1;position: relative;padding-right: 5px;padding-left: 5px;margin: 0px 15px;top: -15px;}
  .iocn{width: 25px;height:25px;background: #e1e1e1;border-radius:16px; margin: auto}
  .iocn img { width: 100%;height: 100% }
  .l{width: 10px;height: 1px;border-bottom: 2px solid #e1e1e1;transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);position: absolute;right: -2px;bottom:1px;}
  #cent input{ border: 0px none}
  .address .text{padding-top:40px;width: 90%;max-width: 300px;}
  .address .text p{padding-left:20px;background-color: #e1f3ff;font-size: 14px;line-height: 28px;height: 28px;}
  .timeDate{position: absolute;left: -90px;top: -50px;}
  .timeDate p{text-align: left;line-height: 40px;font-size: 18px;}
  .month{font-size: 14px;margin-left: 5px;}
   #cent .timeDate .data{font-size: 18px;}
  .year {height: 40px;width:90px;}
  .set{width: 104px;height:100px;position: absolute;right: -134px;top: 20px;}
  .bot{width: 104px;height: 40px;margin-bottom: 20px;border: 1px solid #fff}
  .okBot{background-color: #e1e1e1; border-color: #e1e1e1 ;color: #111;margin-top: 10%;padding:10px 40px }
  .okBot:hover{background-color: #409eff;border-color: #409eff;color: #fff;}
  .update{color:#409eff;margin-left: 40px; text-align: center;font-size: 12px;line-height: 20px;cursor: pointer}
  #cent .ladingIdBill{border:1px solid #409eff;width: 150px;height: 25px;padding-left: 5px;}
  .copy{margin-left: 10px; ;padding: 3px 10px 3px 5px; border: 1px solid #ccc; text-align: center;font-size: 12px;line-height: 20px;cursor: pointer}
  .iocnBox{ min-width:50px;height: 50px;background: #e2f3ff;padding: 10px;border-radius:8px;margin:20px;margin-top:35px;  }
  .iconMage{ position: absolute ;left: 20px;top:30px;}
  .bul{ width: 5px;height: 5px;border-radius: 3px; border: 1px solid #b3e19d}
  .solid{ width: 3px;height: 40px; border-right: 1px solid #e1e1e1}
  .red{ width: 5px;height: 5px;border-radius: 3px; border: 1px solid red}
  .medium{width: 100%;text-align: left}
  @media only screen and (min-width: 300px){
    .cardBox{margin-left:100px;}
  }
  @media only screen and (min-width: 1200px){
    .cardBox{width:100%;min-width: 920px;max-width:1100px;padding: 40px;min-height: 400px;margin:0px auto;}
  }



</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import Public from '../../vuex/public.js'
  import Clipboard from 'clipboard'
  import jsonListData from '../../../static/stationCode.json'
  import {mapState, mapActions} from 'vuex'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import IconCarNor from '../../../static/img/icon/icon_car@2x.png'
  import IconCarSel from '../../../static/img/icon/icon_car_sel.png'
  import IconPlantNor from '../../../static/img/icon/icon_plane@2x.png'
  import IconPlantSel from '../../../static/img/icon/icon_plant_sel.png'
  import IconShipNor from '../../../static/img/icon/icon_ship@2x.png'
  import IconShipSel from '../../../static/img/icon/icon_ship_sel.png'
  import IconTrainNor from '../../../static/img/icon/icon_train@2x.png'
  import IconTrainSel from '../../../static/img/icon/icon_train_sel.png'
  export default {
    name: 'my-Chart',
    created () {
      // 查看本页面路由 绑定对应页面class
      var usr = sessionStorage.getItem('user')
      if(usr) {
        usr = JSON.parse(usr)
        this.user = usr
      }
    },
    data () {
      return {
        uodataShow:true,
        errorDate: null,
        dialogVisible: false,
        dialogVisible2:true,
        check:false,
        labelPosition:'left',
        fromData: {
          orderId: '',//订单id
          operStatus:'',//需要添加的状态
          station:''//站点位置
        },
        input: "",
        year: null,
        pages: {
          page: 1,
          pageSize: 10,
          cunt: null
        },
        //
        list: [
          {
            id: 'AKDFAKJ2', // 柜号/车牌号
            startPosition: { // 起始地
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            endPosition: { // 目的地
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            transportStatus: 1, // 运输状态
            transportType: 2 // 运输类型
          },
          {
            id: 'AKDFAKJ2',
            startPosition: {
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            endPosition: {
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            transportStatus: 1,
            transportType: 2
          }
        ],
        // 渲染列表
        listData: [],
        loading: false,
        operStatus:[{
          value: 0,
          label: '装柜完成',
          label2: 'Loading Complete'
        }, {
          value: 1,
          label: '拖车途中',
          label2: 'On the Trailer'
        }, {
          value: 2,
          label: '进起运站',
          label2: 'In Departure Station'
        }, {
          value: 3,
          label: '国内铁运',
          label2: 'On Domestic Railway'
        },{
          value: 4,
          label: '到达中转站',
          label2: 'Arrive Transfer Station'
        },{
          value: 5,
          label: '报关中',
          label2: 'In Declaration'
        }, {
          value: 6,
          label: '报关放行',
          label2: 'Declaration Complete'
        }, {
          value: 7,
          label: '到达口岸',
          label2: 'Arrive Transit Port'
        }, {
          value: 8,
          label: '转关中',
          label2: 'In Transit'
        }, {
          value: 9,
          label: '转关放行',
          label2: 'Transit Complete'
        }, {
          value: 10,
          label: '出境等换装',
          label2: 'Reloading'
        }, {
          value: 11,
          label: '完成换装',
          label2: 'Reloading Complete'
        }, {
          value: 12,
          label: '到达目的站',
          label2: 'Arrive Destination'
        }, {
          value: 13,
          label: '清关放行',
          label2: 'Customer Clearance'
        }, {
          value: 14,
          label: '派送到门点',
          label2: 'Arrive Door'
        },{
          value: 15,
          label: '装车完成',
          label2: 'Loading Trailer Complete'
        }, {
          value: 16,
          label: '国内运输中',
          label2: 'In Domestic Transit'
        }, {
          value: 17,
          label: '到达口岸仓库',
          label2: 'Arrive Port Warehouse'
        },  {
          value: 18,
          label: '出境',
          label2: 'Exit the Country'
        }, {
          value:19,
          label: '到达目的地海关监管仓',
          label2: 'Arrive Customs Supervision Warehouse'
        }],
        // 汽运：装车完成---国内运输中--到达口岸仓库---换装完成--报关中--报关放行--出境--国外运输中--到达目的地海关监管仓--清关放行--派送到门点
        operStatus2:[{
          value: 0,
          label: '装车完成'
        }, {
          value: 1,
          label: '国内运输中'
        }, {
          value: 2,
          label: '到达口岸仓库'
        }, {
          value: 3,
          label: '换装完成'
        }, {
          value: 4,
          label: '报关中'
        }, {
          value: 5,
          label: '报关放行'
        }, {
          value: 6,
          label: '出境'
        }, {
          value: 7,
          label: '到达目的地海关监管仓'
        }, {
          value: 8,
          label: '清关放行'
        }, {
          value: 9,
          label: '派送到门点'
        }],
        // 汽运：装车完成---国内运输中--到达口岸仓库---换装完成--报关中--报关放行--出境--国外运输中--到达目的地海关监管仓--清关放行--派送到门点
        operStatus2:[{
          value: 0,
          label: '装车完成'
        }, {
          value: 1,
          label: '国内运输中'
        }, {
          value: 2,
          label: '到达口岸仓库'
        }, {
          value: 3,
          label: '换装完成'
        }, {
          value: 4,
          label: '报关中'
        }, {
          value: 5,
          label: '报关放行'
        }, {
          value: 6,
          label: '出境'
        }, {
          value: 7,
          label: '到达目的地海关监管仓'
        }, {
          value: 8,
          label: '清关放行'
        }, {
          value: 9,
          label: '派送到门点'
        }],
        cartonType: [{
          value: '20GP',
          label: '20GP'
        }, {
          value: '40GP',
          label: '40GP'
        }, {
          value: '40HQ',
          label: '40HQ'
        }],
      }
    },
    methods: {
      ...mapActions({
        transportListpost: 'transportListFn',
        updateTansportStatuspost: 'updateTansportStatus',
        delPost: 'deletefn',
        checkID: 'checkNumber',
        mapListFn: 'mapListFn',
        addOper:"addOper"
      }),
      // 分页
      handleCurrentChange (val) {
        this.pages.page = parseInt(val)
        if (this.input) {
          this.saechFn()
        } else {
          this.saechList()
        }
      },
      //
      cance(){
        this.uodataShow = !this.uodataShow
        for(let i in this.listData){
          this.listData[i].check = false
        }
      },
      saechList () {
        this.loading = true
        var parm = {
          code: this.input,
          page: this.pages.page,
          pageSize: this.pages.pageSize
        }
        this.transportListpost(parm)
      },
      // 查询按钮
      saechFn () {
        this.pages.page = 1
        this.saechList()
      },
      // 列表解析
      listFn (res) {
        this.loading = false
        this.errorDate = null
        // 计算分页
        this.listData = []
        if(res.code){
          if(res.code==1){
            this.errorDate = this.languageData.id=='Chinese'?'暂无此类订单': 'No such data'
          }
          if(res.code ==-1){
            this.errorDate = this.languageData.id=='Chinese'?'数据请求异常，请稍后重试': 'Request error Please try again later'
          }
          return
        }
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.pages.cunt = Math.ceil(cunt / this.pages.pageSize)
        }
        var res = res.body.data
        // 重置列表
        var listData = []
        for (let i in res) {
          // 提单号 ，运输状态描述，时间解析，今天/明天
          var ladingId, transportTypeText, time, dateText
          if (res[i].createTime && res[i].createTime!=-1) {
            time = Public.publicLo.timeCheng(res[i].createTime)
          } else {
            time = {ymd: null, hms: null, times: null, s: null, d: null, m: null, md: null, week: null, y: null}
          }
          // 当前时间
          var now = Public.publicLo.dataChange()
          // 匹配当前日期 和当前日期一样 赋值今天
          if ((now.y + now.m) == (time.y + time.m)) { // 匹配当前 年月  2018 06 25    2018 07 09
            var date1 = parseInt(now.d),
              date2 = parseInt(time.d)
             console.log(date1,'tian', date2)
            if (date1 == date2) { // 匹配当前日期
              dateText = this.languageData.id=='Chinese'?'今天':'Today'
            } else if ((date1 - date2) == 1) {
              dateText = this.languageData.id=='Chinese'? '昨天':'Yesterday'
            }else {
              dateText = ''
            }
          }else {
            dateText = ''
          }
          // 拼接字符串
          transportTypeText = this.ransportSwitch(res[i].transportType)
          var strdata = Public.publicLo.postCity(res[i].startPosition)
          var endata = Public.publicLo.postCity(res[i].endPosition)

          var deviceOnfftext
          if (!strdata) {
            strdata = {
              cityCN: "NO DAT",
              cityEn: "NO DAT",
              cityPY: "NO DAT",
              citySX: "NO DAT",
              code: "NO DAT",
              countryCN: "NO DAT",
              coutntryEN: "NO DAT",
              id: "NO DAT",
              stationCN: "NO DAT",
              stationEN: "NO DAT",
            }
          }
          if (!endata) {
            endata = {
              cityCN: "NO DAT",
              cityEn: "NO DAT",
              cityPY: "NO DAT",
              citySX: "NO DAT",
              code: "NO DAT",
              countryCN: "NO DAT",
              coutntryEN: "NO DAT",
              id: "NO DAT",
              stationCN: "NO DAT",
              stationEN: "NO DAT",
            }
          }
//          if(strdata.length > 6){
//          }
//          if(endata.length > 6){
//          }
          if(res[i].deviceOnff && res[i].deviceOnff==1){
            deviceOnfftext = {
              CN: '开',
              EN: 'ON'
            }
          } else {
            if (res[i].deviceOnff == 0) {
              deviceOnfftext = {
                CN: '关',
                EN: 'OFF'
              }
            }else {
              deviceOnfftext = {
                CN: '异常',
                EN: 'error'
              }
            }
          }
          if (res[i].newAddress) {
            if (res[i].newAddress.length > 8) {
              res[i].newAddress = res[i].newAddress.substring(0,7) + '...'
            }
          } else {
            res[i].newAddress = '未请求到数据'
            if(this.languageData.id == 'English'){
              res[i].newAddress = 'No Data'
            }
          }
          var transportStatustext = {EN:'',CN:''}
          if(res[i].transportStatus==0){
            transportStatustext = {EN:'In transit',CN:'运输中'}
          }
          if(res[i].transportStatus == 1){
            transportStatustext = {EN:'Finished',CN:'运输完成'}
          }
          // 操作状态
          var operTime = {ymd: null, hms: null, times: null, s: null, d: null, m: null, md: null, week: null, y: null},
            transOrderOperResponse = {
              "id":'',
              "orderId":'',
              "operStatus":'',
              "operTime":'',
              "station":''
            }

          if(res[i].transOrderOperResponse ){
            transOrderOperResponse = res[i].transOrderOperResponse
            operTime =  Public.publicLo.timeCheng( transOrderOperResponse.operTime)
          }
          var estimatedArrivalTime = ""
          res[i].estimatedArrivalTime= res[i].estimatedArrivalTime ==-1 ? null: res[i].estimatedArrivalTime
          if(res[i].estimatedArrivalTime  ){
            var timeClear = res[i].estimatedArrivalTime - new Date().getTime()

            if(timeClear<0){
              estimatedArrivalTime = '已逾期'
            }else {
              var x = Public.publicLo.datatmie(timeClear,1000).timeD
              if(x<1){estimatedArrivalTime =  '今天到达'}

              else if(x<2){estimatedArrivalTime = '明天到达'}

              else if(x>=2){estimatedArrivalTime = x +'天后到达'}
            }
          }
          var billNumber = res[i].billNumber,billNumberData ='',billNumberObj=[];
          if(billNumber){
            billNumber = billNumber.split(',')
           for(let i in billNumber){
              if(billNumber[i]){
                billNumberObj.push(billNumber[i])
              }
           }

            for(let i in billNumberObj){

              if(i == billNumberObj.length-1 && billNumberObj[i]){
                billNumberData +=  billNumberObj[i]
              }else if(billNumberObj[i]){
                  billNumberData +=  billNumberObj[i] + ' /  '
              }
            }
            if(billNumberData.length>15){
              billNumberData =  billNumberData.substr(0,15)+'...'
            }
          }

          time.m = parseInt(time.m)
          var list = {
            id: res[i].id,  // 后台唯一id
            containerId: res[i].containerId, // 柜号/车牌号
            ladingId: billNumberData, // 提货号
            deviceId: res[i].deviceNumber, // 设备id
            deviceOnff: res[i].deviceOnff,
            postCompilt: res[i].endPosition,
            deviceOnfftext: deviceOnfftext,
            startPosition: strdata.cityCN, // 起始地
            endPosition: endata.cityCN, // 目的地
            startPositionEn: strdata.cityEn, // 起始地英文
            endPositionEn: endata.cityEn, // 目的地英文
            transportStatus: res[i].transportStatus, // 运输状态
            transportStatustextC: transportStatustext.CN,
            transportStatustextE: transportStatustext.EN,
            transportType: res[i].transportType, // 运输类型
            deviceStatus: 0, // 设备状态
            time: time.hms, // 创建时间
            year: parseInt(time.y), // 年
            month: time.m, // 月
            monthEN: time.m ==1? 'Jan':time.m ==2? 'Feb':time.m ==3? 'Mar':time.m ==4? 'Apr':time.m ==5? 'May':time.m ==6? 'Jun':time.m ==7? 'jul':time.m ==8? 'Aug':time.m ==9? 'Sep':time.m ==10? 'Oct':time.m ==11? 'Nov':'Dec', // 月
            data: time.d, // 日
            dateText: dateText, // 今天/昨天
            transportTypeText: transportTypeText.type,
            transportTypeTextEn: transportTypeText.typeEn,
            icon: transportTypeText.icon,
            now: res[i].newAddress, // 当前位置
            ymd: time.ymd + ' ' + time.hms,
            Responseid:transOrderOperResponse.id || '', // 操作状态id
            operStatus:transOrderOperResponse.operStatus|| '',
            operStatusCN:Public.publicLo.doing(res[i].transportType,transOrderOperResponse.operStatus).CN,
            operStatusEN:Public.publicLo.doing(res[i].transportType,transOrderOperResponse.operStatus).EN,
            operTime: operTime.ymd + ' ' + operTime.hms,//操作时间
            station:transOrderOperResponse.station|| '',//备注
            check:false,
            estimatedArrivalTime: estimatedArrivalTime
          }

          if (list.startPosition.length > 7) {
            list.startPosition = list.startPosition.substring(0, 7) + '...'
          }
          if (list.endPosition.length > 7) {
            list.endPosition = list.endPosition.substring(0, 7) + '...'
          }
          if (list.startPositionEn.length > 8) {
            list.startPositionEn = list.startPositionEn.substring(0, 8) + '...'
          }
          if (list.endPositionEn.length > 8) {
            list.endPositionEn = list.endPositionEn.substring(0, 8) + '...'
          }
          if (i == 0) {
            this.year = list.year
          } else {
            if (this.year == list.year) {
              list.year = ''
            }
          }
          listData.push(list)
        }
        this.listData = listData
      },
      // 解析运输方式
      ransportSwitch (data) {
        var transportTypeText
        switch (data) {
          case 0:
            transportTypeText = {type: '火车', icon: IconTrainNor, typeEn: 'Train'}
            break
          case 1:
            transportTypeText = {type: '汽车', icon: IconCarNor, typeEn: 'Motor'}
            break
          case 3:
            transportTypeText = {type: '轮船', icon: IconShipNor, typeEn: 'Freighter'}
            break
          case 2:
            transportTypeText = {type: '飞机', icon: IconPlantNor, typeEn: 'Flight'}
            break
          default:
            transportTypeText = { type: '异常', icon: IconCarNor }
            break
        }
        return transportTypeText
      },
      // 运输完成
      updatStatusFn (parm) {
        this.dialogVisible = true
        if(parm){
          this.fromData.orderId = parm.id
          this.fromData.station = parm.station
        }
       // this.addOperFn()
//        var parm = {
//          id: JSON.stringify(id),
//          transportStatus: '1', // 0：运输中 1：运输完成 2：运输异常
//          recyclePosition:{country: null, city: null, address: null},
//        }
//       this.updateTansportStatuspost(parm)
      },
      updateStatusPost () {
          var parm = {
          id: JSON.stringify(this.fromData.id),
          transportStatus: this.fromData.transportStatus, // 0：运输中 1：运输完成 2：运输异常
          recyclePosition: this.fromData.recyclePosition,
          deviceNumber: this.fromData.deviceNumber
        }
        this.updateTansportStatuspost(parm)

      },
      // 删除运输列表
      del (id) {
        this.loading = true
        var parm = {
          id: JSON.stringify(id)
        }
        this.delPost(parm)
      },
      // 运输列表操作
      listStatus (res) {
        this.loading = false
        this.check = false

        if (res.status == 0) {
          // 修改成功
          var text  = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully'
          //
          if(res.code == 'del'){text = this.languageData.id=='Chinese'?'订单删除成功': 'Delete successfully' }
          if(res.code == 'resetPassword'){text = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully' }
          this.openSuccess(text)
          if (this.input) {
           this.saechFn()
          } else {
           this.saechList()
          }
        }else if (res.status == 1) {
          var text = ''
          // 修改成功 修改失败
          text = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully'
          // 修改成功 修改失败
          this.openSuccess(text)
          if (this.input) {
            this.saechFn()
          } else {
            this.saechList()
          }

        }else  {
          this.openError(res.message)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 跳转地图
      gomap (list) {
        // 清空 vuex 列表
        this.$store.commit('addMapList', null)
        this.$store.commit('shechDat', null)
        this.$router.push({name: 'map', query: {id: list.id}})
        return false
      },
      // 查看详情
      goChart (list) {
        this.$router.push({name: 'chartSon', query: {id: list.id}})
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message({
          message: text,
          type: 'error'
        })

      },
      //复制提单号
      copyFn (event) {
        const clipboard = new Clipboard('.copy');
        var text = '复制成功'
        this.openSuccess(text)
      },
      // 添加操作
      addOperFn(){
        var parm = []
        if(!this.uodataShow){
         var data = this.listData

          for (let i in data){
            if(data[i].check){
              var  pu = {
                orderId:data[i].id,//订单id
                operStatus:parseInt(this.fromData.operStatus),//需要添加的状态
                station:this.fromData.station//站点位置
              }
              parm.push(pu)
            }
          }
        }else {
           parm = [{
            orderId: this.fromData.orderId,//订单id
            operStatus:parseInt(this.fromData.operStatus),//需要添加的状态
            station:this.fromData.station//站点位置
          }]
        }
        if(parm.length<=0){
          this.openError('至少选中一个订单')
          return
        }
        this.dialogVisible = false
        this.addOper(parm)
      },
      // 全选
      all(){
        if(this.check){
          for(let i in this.listData){
            this.listData[i].check = true
          }
        }else {
          for(let i in this.listData){
            this.listData[i].check = false
          }
        }
      }
    },
    computed: {
      transport: function () {
        var parm = this.transportList
        if (parm) {
          if(parm.body){
            this.listFn(parm)
          }
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      mapListData: function () {
        var parm = this.mapList
        if (parm) {
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'transportList',
        'updateStatus',
        'language',
        'mapList'
      ])
    },
    mounted () {
      // 配置顶部菜单
//      var parm = {logo: true, login: false, us: true, language: false, user: true, nav: true}
//      this.$store.commit('updateNave', parm)
      this.saechList()
    },
    components: {
      ElButton,
      HeaderPublc
    }
  }
</script>

